<template>
  <el-card>
    <div slot="header" style="line-height: 40px">
      <h1>商品编辑页面</h1>
    </div>
    <el-form
      ref="productsForm"
      :rules="rules"
      label-width="80px"
      :model="productsForm"
    >
      <img class="ppicture" :src="productsForm.ppicture" />
      <el-form-item label="ID" v-show="false">
        <el-input v-model="productsForm.id" disabled></el-input>
      </el-form-item>
      <el-form-item label="商品名" prop="pname">
        <el-input v-model.trim="productsForm.pname"></el-input>
      </el-form-item>
      <el-form-item label="分类ID" prop="cid">
        <el-input v-model.trim="productsForm.cid"></el-input>
      </el-form-item>
      <el-form-item label="商品介绍" prop="pintro">
        <el-input v-model.trim="productsForm.pintro"></el-input>
      </el-form-item>
      <el-form-item label="商品价格" prop="pprice">
        <el-input-number
          controls-position="right"
          v-model.trim="productsForm.pprice"
        ></el-input-number>
      </el-form-item>
           <el-form-item label="出售状态" prop="selled">
           <el-select
            class="inputs"
            size="small"
            v-model="productsForm.selled"
            clearable
            placeholder="是否已出售"
          >
            <el-option label="未出售" :value="0"></el-option>
            <el-option label="已出售" :value="1"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="热门状态" prop="ishot">
           <el-select
            class="inputs"
            size="small"
            v-model="productsForm.ishot"
            clearable
            placeholder="是否热门"
          >
            <el-option label="否" :value="0"></el-option>
            <el-option label="是" :value="1"></el-option>
          </el-select>
      </el-form-item>

      <el-form-item label="好物状态" prop="isgood">
       <el-select
            class="inputs"
            size="small"
            v-model="productsForm.isgood"
            clearable
            placeholder="是否好物"
          >
            <el-option label="否" :value="0"></el-option>
            <el-option label="是" :value="1"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="onReset">重置</el-button>
        <el-button @click="$router.back()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import productsApi from '@/http/productsApi';

export default {
  data() {
    let checkcid = (rule, value, callback) => {
      productsApi.checkcid(value).then(res => {
        if (res.data.code == 200) {
          if (res.data.msg) {
            callback();
          } else {
            callback(new Error());
          }
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: 'error',
          });
        }
      });
    };
    return {
      productsForm: {
        pname: '',
        cid: '',
        pintro: '',
        pprice: '',
        pnum: '',
        state: '',
      },
      rules: {
        pname: [
          {
            required: true,
            message: '请输入商品名',
            trigger: 'blur',
          },
        ],
        cid: [
          {
            required: true,
            message: '请输入ID',
            trigger: 'blur',
          },
          {
            validator: checkcid,
            message: '没有这个分类ID',
            trigger: 'blur',
          },
        ],
        pintro: [
          {
            required: true,
            message: '请输入商品介绍',
            trigger: 'blur',
          },
        ],
        pprice: [
          {
            required: true,
            message: '请输入商品价格',
            trigger: 'blur',
          },
        ],
        selled: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur',
          },
        ],
        isgood: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur',
          },
        ],
        ishot: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur',
          },
        ],
      },
    };
  },
  created() {
    this.getEditObj();
  },
  methods: {
    onSubmit() {
      this.$refs['productsForm'].validate(valid => {
        if (valid) {
          console.log('submit!', this.productsForm);
          productsApi.save(this.productsForm).then(res => {
            console.log(res);
            if (res.data.code == 200) {
              this.$router.replace('/goods/products.html');
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: 'error',
              });
            }
          });
        } else {
          console.log('error submit!!');
          return false; //阻止表单提交
        }
      });
    },
    onReset() {
      this.$refs['productsForm'].resetFields();
    },
    getEditObj() {
      let id = this.$route.params.id;
      if (id) {
        productsApi.edit(id).then(res => {
          if (res.data.code == 200) {
            this.productsForm = res.data.data;
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.ppicture{
  width: 150px;
  height: 150px;
  margin-left: 80px;
}
</style>